<template>  
  <el-container class="wrapper">  
     <el-header class="header-shallow-gray" style="display: flex; align-items: center;"> 
        <el-image src="/public/logo.png"></el-image> 
        <p class="title">智慧社区管理系统</p>  
        <div style="margin-left: auto;">  
          <el-button plain type="primary" @click="exit">安全退出</el-button>  
        </div>  
      </el-header>
    <el-container>  
      <el-aside width="200px" class="aside-shallow-gray">  
        <Wjq-Menu></wjq-menu>  
      </el-aside>  
      <el-main class="main-white-with-shadow">  
        <router-view />  
      </el-main>  
    </el-container>  
  </el-container>  
</template>
<script setup>
import WjqMenu from '@/components/menu'
// 安全退出
function exit(){
  document.cookie = "token=; expires=Thu, 01 Jan 1970 00:00:00 UTC; path=/";
  window.location.reload();
}
</script>
<style scoped lang="scss">
  .wrapper{
    height: 100vh;
    .el-aside{
      border-right: 1px solid #cccccc;
    }
    .el-header{
      border-bottom: 1px solid #cccccc;
    }
  }
   .aside-shallow-gray {  
  background-color: #ffffff;  
}  
  
.header-shallow-gray {  
  background-color: rgba(121, 169, 227, 0.5); 
}  
  
.main-white-with-shadow {  
  background-color: white;  
  box-shadow: inset 0px 3px 5px rgba(0, 0, 0, 0.1);  
}  

.el-image{
  height: 85px; 
  margin-left: 20px;
}
.title{
  margin-top: 22px;
  font-size:x-large;
  margin-left: 10px;
  color: rgb(4, 4, 112);
  font-style: italic;
}
</style>